<template>
  <!-- <img src="@/assets/img/bg.png" class="app-bg" /> -->
  <!-- <vue-particles
    color="#9494FF"
    :particleOpacity="1"
    :particlesNumber="70"
    shapeType="circle"
    :particleSize="2"
    linesColor="#fff"
    :linesWidth="0"
    :lineLinked="false"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="5"
    :hoverEffect="false"
    hoverMode="grab"
    :clickEffect="false"
    clickMode="push"
  >
  </vue-particles> -->
  <div class="index">
    <!-- <div class="titles" @click="toReload()"></div> -->
    <div class="main flex between">
      <div class="mian-left">
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>工作动态分析情况</div>
        </div>
        <div class="item item1 font">
          <img src="@/assets/img/bg2.png" class="bg2" />
          <div
            class="item-main flex align between wrap"
            v-if="setList.length != 0"
          >
            <div class="act-item flex align">
              <img src="@/assets/img/icon1.png" class="icon" />
              <div class="act-info">
                <div class="flex align between">
                  <div>{{ setList[0].name }}</div>
                  <div class="num" style="color: #24a9ff">
                    {{ setList[0].count }}
                  </div>
                </div>
                <img src="@/assets/img/icon1-a.png" />
              </div>
            </div>
            <div class="act-item flex align">
              <img src="@/assets/img/icon2.png" class="icon" />
              <div class="act-info">
                <div class="flex align between">
                  <div>{{ setList[1].name }}</div>
                  <div class="num" style="color: #24a9ff">
                    {{ setList[1].count }}
                  </div>
                </div>
                <img src="@/assets/img/icon2-a.png" />
              </div>
            </div>
            <div class="act-item flex align">
              <img src="@/assets/img/icon3.png" class="icon" />
              <div class="act-info">
                <div class="flex align between">
                  <div>{{ setList[2].name }}</div>
                  <div class="num" style="color: #24a9ff">
                    {{ setList[2].count }}
                  </div>
                </div>
                <img src="@/assets/img/icon3-a.png" />
              </div>
            </div>
            <div class="act-item flex align">
              <img src="@/assets/img/icon4.png" class="icon" />
              <div class="act-info">
                <div class="flex align between">
                  <div>{{ setList[3].name }}</div>
                  <div class="num" style="color: #24a9ff">
                    {{ setList[3].count }}
                  </div>
                </div>
                <img src="@/assets/img/icon4-a.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>网上代表联络站意见建议统计</div>
        </div>
        <div class="item item2">
          <img src="@/assets/img/bg2.png" class="bg2" />
          <div class="item-main">
            <el-row class="chart1" id="chart1"></el-row>
          </div>
        </div>
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>信息发布</div>
        </div>
        <div class="item item3">
          <img src="@/assets/img/bg2.png" class="bg2" />
          <div class="item-main">
            <div class="list2">
              <vue3-seamless-scroll
                :list="list2"
                :hover="true"
                class="seamless-warp scroll"
                direction="down"
                :step="0.2"
              >
                <div
                  class="list-item list-item2"
                  v-for="(item, index) in list2"
                  @click="toInfo(item.id)"
                  :key="index"
                >
                  <div>{{ item.title }}</div>
                  <div class="time">{{ item.create_time }}</div>
                </div>
              </vue3-seamless-scroll>
            </div>
            <!-- <el-row class="chart1" id="chart1"></el-row> -->
          </div>
        </div>
      </div>
      <div class="mian-center">
        <div class="item">
          <!-- <img src="@/assets/img/bg2.png" class="bg2" /> -->
          <div class="item-main">
            <div class="total">
              <img src="@/assets/img/bg5.png" />
              <div class="total-tit">XX镇联络站信息</div>
              <div class="total-num">联系人: 赵见萌</div>
              <div class="total-num">联系方式：12315616156</div>
              <div class="total-num">地址：江西省南昌市南昌县东新街道</div>
              <div class="total-num">代表数量：251个</div>
              <div class="total-btn" @click="show4 = true">查看详情</div>
            </div>
            <div class="center-map">
              <!-- <div class="total" v-if="name == ''">
              <div class="total-tit">网格总数</div>
              <div class="total-num">{{ total }}<span>处</span></div>
            </div> -->

              <img src="@/assets/img/map.png" class="map" />
              <div
                class="map-item"
                @click="toActive(item.id, item.name, index)"
                :style="'left:' + item.left + ';top:' + item.top"
                v-for="(item, index) in regionList"
                :key="index"
              >
                <img src="@/assets/img/icon-a.png" v-if="map_id == item.id" />
                <img src="@/assets/img/icon.png" v-else />
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mian-right">
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>代表履职分析情况</div>
        </div>
        <div class="item item4">
          <img src="@/assets/img/bg3.png" class="bg2" />
          <div class="item-main">
            <div class="list2">
              <div class="flex align between list-nav">
                <div class="list-flex">代表</div>
                <div class="list-flex">姓名</div>
                <div class="list-flex">单位及职务</div>
                <div class="list-flex">履职数量</div>
              </div>
              <vue3-seamless-scroll
                :list="list3"
                :hover="true"
                class="seamless-warp scroll scroll3"
                direction="down"
                :step="0.2"
              >
                <div
                  class="list-item list-item3"
                  v-for="(item, index) in list3"
                  @click="toInfo(item.id)"
                  :key="index"
                >
                  <div class="flex align between">
                    <div class="list-flex">
                      <img class="head" src="@/assets/img/head2.png" />
                    </div>
                    <div class="list-flex">张三</div>
                    <div class="list-flex">南昌县党政办主任</div>
                    <div class="list-flex">100件</div>
                  </div>
                </div>
              </vue3-seamless-scroll>
            </div>
          </div>
        </div>
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>建议公开</div>
        </div>
        <div class="item item3">
          <img src="@/assets/img/bg2.png" class="bg2" />
          <div class="item-main">
            <div class="list2">
              <vue3-seamless-scroll
                :list="list3"
                :hover="true"
                class="seamless-warp scroll"
                direction="down"
                :step="0.2"
              >
                <div
                  class="list-item list-item2"
                  v-for="(item, index) in list3"
                  @click="toInfo(item.id)"
                  :key="index"
                >
                  <div>
                    甫北社区居民反映社区主干道每日早晚高峰期有许多流动摊贩占用人行道、机动车道摆摊经营，造成交通拥堵，存在安全隐患，垃圾随意丢弃，导致社区环境恶化，噪音问题也影响群众生活。同时这些流动摊贩也影响了沿路店面的正常经营。居民请求相关部门规范经营行为，还路于民，改善社区环境。
                  </div>
                  <div class="flex between time">
                    <div class="time">标题:甫北社区占道经营问题</div>
                    <div class="time">2024-08-29</div>
                  </div>
                </div>
              </vue3-seamless-scroll>
            </div>
          </div>
        </div>
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>民生实事</div>
        </div>
        <div class="item item6">
          <img src="@/assets/img/bg3.png" class="bg2" />
          <div class="item-main">
            <div class="list2">
              <div class="flex align between list-nav">
                <div class="list-flex">项目名称</div>
                <div class="list-flex">牵头单位</div>
                <div class="list-flex">进展情况</div>
              </div>
              <vue3-seamless-scroll
                :list="list4"
                :hover="true"
                class="seamless-warp scroll"
                direction="down"
                :step="0.2"
              >
                <div
                  class="list-item list-item6"
                  v-for="(item, index) in list4"
                  @click="toInfo(item.id)"
                  :key="index"
                >
                  <div class="flex align between">
                    <div class="list-flex">{{item.name}}</div>
                    <div class="list-flex">{{item.content}}</div>
                    <div class="list-flex">已完成</div>
                  </div>
                </div>
              </vue3-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="show" v-if="show" @click="show = false"></div>
    <div class="show-con" v-if="show">
      <div class="show-main">
        <div class="show-main-con" v-if="type == 1">
          <div class="con-tit">{{ info.title }}</div>
          <div class="con-time">{{ info.create_time }}</div>
          <div class="con-content" v-html="info.content"></div>
        </div>
        <div class="show-main-con" v-if="type == 2">
          <div class="con-tit con-tit2">{{ info.title }}</div>
          <div class="con-time con-time2">提交时间：{{ info.create_time }}</div>
          <div class="con-content con-content2" v-html="info.content"></div>
          <div class="con-content" v-if="info.reply_content != ''">
            办理情况：{{ info.reply_content }}
          </div>
          <div class="con-time">办结时间：{{ info.create_time }}</div>
        </div>
      </div>
    </div>
    <div class="show" v-if="show2" @click="show2 = false"></div>
    <div class="show-con show-con2" v-if="show2">
      <div class="show-main2">
        <div class="show2-tit">
          代表墙<span v-if="groupName != ''">-{{ groupName }}</span
          >（{{ memberSum2 }}人）
        </div>
        <div class="show-Lea" v-if="leader != '' && deputy_leader != ''">
          团长：{{ leader }}
          <span> 副团长：{{ deputy_leader }}</span>
        </div>
        <div class="lists" v-if="memberList1.length != 0">
          <div class="show2-tit2">国代表（{{ memberList1.length }}人）</div>
          <div class="flex list-con">
            <div
              class="show-list"
              v-for="(item, index) in memberList1"
              :key="index"
            >
              <img :src="item.id_photo" />
              <div>{{ item.truename }}</div>
              <div class="tab">国代表</div>
            </div>
          </div>
        </div>
        <div class="lists" v-if="memberList2.length != 0">
          <div class="show2-tit2">省代表（{{ memberList2.length }}人）</div>
          <div class="flex list-con">
            <div
              class="show-list"
              v-for="(item, index) in memberList2"
              :key="index"
            >
              <img :src="item.id_photo" />
              <div>{{ item.truename }}</div>
              <div class="tab">省代表</div>
            </div>
          </div>
        </div>
        <div class="lists" v-if="memberList3.length != 0">
          <div class="show2-tit2">市代表（{{ memberList3.length }}人）</div>
          <div class="flex list-con">
            <div
              class="show-list"
              v-for="(item, index) in memberList3"
              :key="index"
            >
              <img :src="item.id_photo" />
              <div>{{ item.truename }}</div>
              <div class="tab">市代表</div>
            </div>
          </div>
        </div>
        <div class="lists" v-if="memberList4.length != 0">
          <div class="show2-tit2">区县代表（{{ memberList4.length }}人）</div>
          <div class="flex list-con">
            <div
              class="show-list"
              v-for="(item, index) in memberList4"
              :key="index"
            >
              <img :src="item.id_photo" />
              <div>{{ item.truename }}</div>
              <div class="tab">区县代表</div>
            </div>
          </div>
        </div>
        <div class="lists" v-if="memberList5.length != 0">
          <div class="show2-tit2">乡镇代表（{{ memberList5.length }}人）</div>
          <div class="flex list-con">
            <div
              class="show-list"
              v-for="(item, index) in memberList5"
              :key="index"
            >
              <img :src="item.id_photo" />
              <div>{{ item.truename }}</div>
              <div class="tab">乡镇代表</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="show" v-if="show3" @click="show3 = false"></div>
    <div class="show-con show-con2" v-if="show3">
      <div class="show-main2">
        <div class="show2-tit">八一乡人大联络站简介</div>
        <div class="show3-con" v-html="content"></div>
      </div>
    </div>
    <div class="show" v-if="show4" @click="show4 = false"></div>
    <div class="show4" v-if="show4">
      <img src="@/assets/img/bg6.png" class="show-bg" />
      <div class="show4-con">
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>XXX镇联络站</div>
        </div>
        <div class="show4-intro">
          <div>联系人: 赵见萌</div>
          <div>联系方式：12315616156</div>
          <div>地址：江西省南昌市南昌县东新街道</div>
        </div>
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>人大代表21位</div>
        </div>
        <vue3-seamless-scroll
          :list="list3"
          :hover="true"
          class="seamless-warp scroll scroll3"
          direction="left"
          :step="0.5"
        >
          <div class="flex align">
            <div v-for="(item, index) in list3" :key="index">
              <div class="show4-list">
                <img src="@/assets/img/head3.png" />
                <div><span>姓名</span>张园园</div>
                <div><span>性别</span>女</div>
                <div><span>电话</span>1234156111</div>
                <div><span>所属社区</span>桂旺巷社区</div>
              </div>
              <div class="show4-list">
                <div class="show4-list-tit">在办事项</div>
                <div class="item-main">
                  <div class="list2">
                    <vue3-seamless-scroll
                      :list="list3"
                      :hover="true"
                      class="seamless-warp scroll"
                      direction="down"
                      :step="0.2"
                    >
                      <div
                        class="list-item list-item2"
                        v-for="(item, index) in list3"
                        @click="toInfo(item.id)"
                        :key="index"
                      >
                        <div>关于南昌市主城区通往安义县、进贤县高速....</div>
                        <div class="time">2024-08-29</div>
                      </div>
                    </vue3-seamless-scroll>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
    <div class="show show5" v-if="show5" @click="show5 = false">
      <div class="show5-con flex align between">
        <div class="head-img">
          <img src="@/assets/img/head_bg.png" class="head_bg" />
          <img src="@/assets/img/head_a.png" class="head_a" />
        </div>
        <div class="show5-con">
          <el-carousel height="882px">
            <el-carousel-item
              v-for="item in list"
              :key="item"
              :interval="1000"
              autoplay
            >
              <div class="con1" v-html="item.content"></div>
              <div class="con2">——{{ item.title }}</div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { article, position, setting, station,project } from "@/api/apiData";
export default {
  components: { Vue3SeamlessScroll },
  data() {
    return {
      timer: null,
      listData: [
        {
          name: "111",
        },
        {
          name: "111",
        },
        {
          name: "111",
        },
        {
          name: "111",
        },
        {
          name: "111",
        },
      ],
      show: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      showChart: false,
      total: 0,
      nums: "",
      list: [],
      setList: [],
      list2: [],
      list3: [],
      articleList: [],
      titNum: 1,
      info: "",
      regionList: [
        {
          id: 1,
          left: "21vw",
          top: "4vw",
          name: "蒋巷镇",
          lianluo: "xx镇联络站信息",
          num1: 5,
          num2: 3,
          gridList: [
            {
              name: "第八代表团",
              tuan: "郑建飞",
              ftuan: "胡向军",
              list: [
                {
                  name: "居 委 会",
                  tuanList: ["熊小毛", "邓志华", "万  娜"],
                },
                {
                  name: "八一中学",
                  tuanList: ["胡向军"],
                },
                {
                  name: "中心小学",
                  tuanList: ["郑建飞"],
                },
                {
                  name: "卫 生 院",
                  tuanList: ["刘  旭 "],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          left: "19vw",
          top: "19vw",
          name: "幽兰镇",
          num1: 2,
          num2: 5,
          gridList: [
            {
              name: "第一代表团",
              tuan: "涂永生",
              ftuan: "姜磊",
              list: [
                {
                  name: "团员",
                  tuanList: ["胡碧东", "涂永生", "涂建平", "万桂兰"],
                },
              ],
            },
          ],
        },
        {
          id: 3,
          left: "18vw",
          top: "13vw",
          name: "塘南镇",
          num1: 3,
          num2: 6,
          gridList: [
            {
              name: "第五代表团",
              tuan: "魏  伟",
              ftuan: "魏云青",
              list: [
                {
                  name: "团员",
                  tuanList: ["吴澄宇", "魏云青", "杨  刚"],
                },
              ],
            },
          ],
        },
        {
          id: 4,
          left: "22vw",
          top: "11vw",
          name: "武阳镇",
          num1: 5,
          num2: 4,
          gridList: [
            {
              name: "第一代表团",
              tuan: "涂永生",
              ftuan: "姜磊",
              list: [
                {
                  name: "团员",
                  tuanList: ["罗良红", "姜  磊", "姜宏强", "邓海英", "万  盼"],
                },
              ],
            },
          ],
        },
        {
          id: 5,
          left: "3vw",
          top: "28vw",
          name: "冈上镇",
          num1: 6,
          num2: 2,
          gridList: [
            {
              name: "第五代表团",
              tuan: "魏  伟",
              ftuan: "魏云青",
              list: [
                {
                  name: "团员",
                  tuanList: [
                    "毛  杰",
                    "魏  伟",
                    "姜旭龙",
                    "魏俊鹏",
                    "姜  云",
                    "李  盼",
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 6,
          left: "4vw",
          top: "32vw",
          name: "广福镇",
          num1: 7,
          num2: 2,
          gridList: [
            {
              name: "第三代表团",
              tuan: "徐海华",
              ftuan: "邓洪根",
              list: [
                {
                  name: "团员",
                  tuanList: ["徐芬芬", "徐海华", "卢玉平", "魏丹丹"],
                },
              ],
            },
          ],
        },
        {
          id: 7,
          left: "8vw",
          top: "32vw",
          name: "三江镇",
          num1: 4,
          num2: 2,
          gridList: [
            {
              name: "第四代表团",
              tuan: "许雨林",
              ftuan: "万秋根",
              list: [
                {
                  name: "团员",
                  tuanList: [
                    "许雨林",
                    "熊  艳",
                    "万建成",
                    "魏爱兰",
                    "万文军",
                    "万浩浩",
                    "万新华",
                    "戴  娟",
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 8,
          left: "7vw",
          top: "27vw",
          name: "向塘镇",
          num1: 2,
          num2: 7,
          gridList: [
            {
              name: "第二代表团",
              tuan: "魏水菊",
              ftuan: "杨金兵",
              list: [
                {
                  name: "团员",
                  tuanList: ["邓涵玮", "魏水菊", "魏文宣", "魏泉华"],
                },
              ],
            },
          ],
        },
        {
          id: 9,
          left: "24vw",
          top: "15vw",
          name: "泾口乡",
          num1: 4,
          num2: 6,
          gridList: [
            {
              name: "第三代表团",
              tuan: "徐海华",
              ftuan: "邓洪根",
              list: [
                {
                  name: "团员",
                  tuanList: ["张  懿", "邓洪根", "谌寿平", "邓国员", "邓永红"],
                },
              ],
            },
          ],
        },
        {
          id: 10,
          left: "15vw",
          top: "6vw",
          name: "南新乡",
          num1: 2,
          num2: 8,
          gridList: [
            {
              name: "第二代表团",
              tuan: "魏水菊",
              ftuan: "杨金兵",
              list: [
                {
                  name: "团员",
                  tuanList: ["陈  慧", "杨金兵", "胡佐秀", "罗火金", "刘红蕾"],
                },
              ],
            },
          ],
        },
        {
          id: 11,
          left: "8.5vw",
          top: "20vw",
          name: "八一乡",
          num1: 7,
          num2: 5,
          gridList: [
            {
              name: "第六代表团",
              tuan: "胡文波",
              ftuan: "漆艳青",
              list: [
                {
                  name: "团员",
                  tuanList: ["万茂文", "胡文波", "陶会琴", "胡海宾"],
                },
              ],
            },
          ],
        },
        {
          id: 12,
          left: "11vw",
          top: "32vw",
          name: "黄马乡",
          num1: 4,
          num2: 8,
          gridList: [
            {
              name: "第四代表团",
              tuan: "许雨林",
              ftuan: "万秋根",
              list: [
                {
                  name: "团员",
                  tuanList: ["万秋根", "谭金花"],
                },
              ],
            },
          ],
        },
        {
          id: 13,
          left: "16vw",
          top: "23vw",
          name: "塔城乡",
          num1: 2,
          num2: 7,
          gridList: [
            {
              name: "第七代表团",
              tuan: "龚水根",
              ftuan: "陈晶",
              list: [
                {
                  name: "团员",
                  tuanList: ["章  云", "章祝青", "章  磊", "章欢欢"],
                },
              ],
            },
          ],
        },
        {
          id: 14,
          left: "3vw",
          top: "22vw",
          name: "富山乡",
          num1: 5,
          num2: 4,
          gridList: [
            {
              name: "第六代表团",
              tuan: "胡文波",
              ftuan: "漆艳青",
              list: [
                {
                  name: "团员",
                  tuanList: ["陶淑云", "漆艳青", "唐海艳", "邓志伟"],
                },
              ],
            },
          ],
        },
        // {
        //   id: 15,
        //   left: "9vw",
        //   top: "25vw",
        //   name: "南江村",
        //   num1: 4,
        //   num2: 3,
        //   gridList: [
        //     {
        //       name: "第七代表团",
        //       tuan: "龚水根",
        //       ftuan: "陈晶",
        //       list: [
        //         {
        //           name: "团员",
        //           tuanList: ["王金友", "陈  晶", "喻馨乐"],
        //         },
        //       ],
        //     },
        //   ],
        // },
        // {
        //   id: 16,
        //   left: "16vw",
        //   top: "23vw",
        //   name: "板联村",
        //   num1: 6,
        //   num2: 3,
        //   gridList: [
        //     {
        //       name: "第七代表团",
        //       tuan: "龚水根",
        //       ftuan: "陈晶",
        //       list: [
        //         {
        //           name: "团员",
        //           tuanList: ["张明慧", "龚水根", "吴海龙"],
        //         },
        //       ],
        //     },
        //   ],
        // },
      ],
      regionList2: [],
      regionList3: [],
      map_id: "",
      gridList: [],
      name: "",
      status: false,
      list4: [],
      type: 1,
      group: [],
      memberList1: [],
      memberList2: [],
      memberList3: [],
      memberList4: [],
      memberList5: [],
      memberSum: 0,
      groupName: "",
      memberSum2: 0,
      leader: "",
      deputy_leader: "",
      content: "",
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.beforeUrl = from.path;
    });
  },
  mounted() {
    this.getData();
    // this.toShowChart();
    // this.getList(1);
    this.getChart1();
    // this.getChart2();
  },
  methods: {
    toCancelshow5() {
      this.show5 = false;
      // this.timer = setTimeout(() => {
      //   this.getShow();
      // }, 1000);
    },
    getShow() {
      this.show5 = true;
    },
    toShowChart() {
      this.showChart = true;
      this.getChart1();

      // station.feedbackAnalysis().then((res) => {
      //   let data = res.data;
      //   this.getChart1(data.data, data.name);
      // });
      // station.feedback.monthAnalysis().then((res) => {
      //   let data = res.data;
      //   this.getChart2(data);
      // });
    },
    toReload() {
      location.reload();
    },
    getData() {
      position.list({ position_id: 1 }).then((res) => {
        if (res.code == 1) {
          this.list = res.data;
        }
      });
      setting.index().then((res) => {
        if (res.code == 1) {
          this.setList = res.data.gzdt.data;
        }
      });
      article.lists().then((res) => {
        if (res.code == 1) {
          this.list2 = res.data.list;
        }
      });
      station.all().then((res) => {
        if (res.code == 1) {
          this.list3 = res.data;
        }
      });
      project.lists().then((res) => {
        if (res.code == 1) {
          this.list4 = res.data.list;
        }
      });
      // station.feedback.lists().then((res) => {
      //   this.list = res.data.list;
      // });
      // article.lists({ channel_id: 2 }).then((res) => {
      //   this.list2 = res.data.list;
      // });
      // article.lists({ channel_id: 13 }).then((res) => {
      //   this.list4 = res.data.list;
      // });
      // group.lists().then((res) => {
      //   this.regionList3 = res.data.list;
      // });
      // group.rddb().then((res) => {
      //   this.regionList2 = res.data.list;
      // });
    },
    getList(n) {
      station
        .memberList({
          represent_type: 1,
          group: this.group,
          page: 1,
          size: 100,
        })
        .then((res) => {
          if (res.code == 1) {
            this.memberList1 = res.data.list;
          }
        });
      station
        .memberList({
          represent_type: 2,
          group: this.group,
          page: 1,
          size: 100,
        })
        .then((res) => {
          if (res.code == 1) {
            this.memberList2 = res.data.list;
          }
        });
      station
        .memberList({
          represent_type: 3,
          group: this.group,
          page: 1,
          size: 100,
        })
        .then((res) => {
          if (res.code == 1) {
            this.memberList3 = res.data.list;
          }
        });
      station
        .memberList({
          represent_type: 4,
          group: this.group,
          page: 1,
          size: 100,
        })
        .then((res) => {
          if (res.code == 1) {
            this.memberList4 = res.data.list;
          }
        });
      station
        .memberList({
          represent_type: 5,
          group: this.group,
          page: 1,
          size: 100,
        })
        .then((res) => {
          if (res.code == 1) {
            this.memberList5 = res.data.list;
            if (n == 1) {
              this.memberSum =
                this.memberList1.length +
                this.memberList2.length +
                this.memberList3.length +
                this.memberList4.length +
                this.memberList5.length;
            } else {
              this.memberSum2 =
                this.memberList1.length +
                this.memberList2.length +
                this.memberList3.length +
                this.memberList4.length +
                this.memberList5.length;
            }
          }
        });
    },
    getChart1() {
      let data2 = ["1月", "2月", "3月", "4月", "5月"];
      let data1 = [7, 16, 8, 9, 5];
      let data3 = [17, 21, 18, 29, 15];
      const that = this;
      let myChart = this.$echarts.init(document.getElementById("chart1"));
      let option = {
        grid: {
          top: "10%", // 等价于 y: '16%'
          left: "5%",
          right: "8%",
          bottom: "15%",
          containLabel: true,
        },
        // legend: {
        //   data: [
        //     { name: "已办", textStyle: { color: "#fff" } },
        //     { name: "待办", textStyle: { color: "#fff" } },
        //   ],
        // },
        xAxis: {
          type: "category",
          data: data2,
          axisLabel: {
            show: true,
            color: "#ffffff",
            fontSize: 14,
            // 设置 formatter，使用 \n 进行换行
            formatter: function (params) {
              var str = ""; // 最终拼接成的字符串
              var paramsLen = params.length; // 获取每项文字的个数
              var len = 8; // 每行能显示的字的个数（根据实际情况自己设置）
              var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
              if (paramsLen > len) {
                //大于设定的len就换行，不大于就不变化
                for (var i = 0; i < rowNumber; i++) {
                  var temp = ""; // 表示每一次截取的字符串
                  var start = i * len; // 开始截取的位置
                  var end = start + len; // 结束截取的位置
                  if (i == rowNumber - 1) {
                    // 最后一次不换行
                    temp = params.substring(start, paramsLen);
                  } else {
                    // 每一次拼接字符串并换行
                    temp = params.substring(start, end) + "\n";
                  }
                  str += temp; // 最终拼成的字符串
                }
              } else {
                // 给新的字符串赋值
                str = params;
              }
              return str; //返回字符串
            },
          },
          type: "category",
        },
        yAxis: {
          splitLine: {
            show: true, // 显示分割线
            lineStyle: {
              color: "#b1adad", // 红色分割线
            },
          },
          axisLabel: {
            show: true,
            color: "#ffffff",
          },
          type: "value",
        },
        series: [
          {
            data: data1,
            type: "bar",
            label: {
              color: "#fff",
              show: true,
              position: "top", // 标签的位置，可以是'top'、'bottom'、'left'、'right'等
              formatter: "{c}", // {c} 表示系列中的数据值
            },
            itemStyle: {
              //渐变色
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#FE6207" },
                  { offset: 1, color: "#F90D0A" },
                ],
              },
            },
          },
        ],
      };
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
    getChart2() {
      let data2 = ["1月", "2月", "3月", "4月", "5月"];
      let data1 = [7, 16, 8, 9, 5];
      let data3 = [17, 21, 18, 29, 15];
      const that = this;
      let myChart = this.$echarts.init(document.getElementById("chart2"));
      let option = {
        grid: {
          top: "10%", // 等价于 y: '16%'
          left: "5%",
          right: "8%",
          bottom: "15%",
          containLabel: true,
        },
        legend: {
          data: [
            { name: "已办", textStyle: { color: "#fff" } },
            { name: "待办", textStyle: { color: "#fff" } },
          ],
        },
        xAxis: {
          type: "category",
          data: data2,
          axisLabel: {
            show: true,
            color: "#ffffff",
            fontSize: 14,
            // 设置 formatter，使用 \n 进行换行
            formatter: function (params) {
              var str = ""; // 最终拼接成的字符串
              var paramsLen = params.length; // 获取每项文字的个数
              var len = 8; // 每行能显示的字的个数（根据实际情况自己设置）
              var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
              if (paramsLen > len) {
                //大于设定的len就换行，不大于就不变化
                for (var i = 0; i < rowNumber; i++) {
                  var temp = ""; // 表示每一次截取的字符串
                  var start = i * len; // 开始截取的位置
                  var end = start + len; // 结束截取的位置
                  if (i == rowNumber - 1) {
                    // 最后一次不换行
                    temp = params.substring(start, paramsLen);
                  } else {
                    // 每一次拼接字符串并换行
                    temp = params.substring(start, end) + "\n";
                  }
                  str += temp; // 最终拼成的字符串
                }
              } else {
                // 给新的字符串赋值
                str = params;
              }
              return str; //返回字符串
            },
          },
          type: "category",
        },
        yAxis: {
          splitLine: {
            show: true, // 显示分割线
            lineStyle: {
              color: "#b1adad", // 红色分割线
            },
          },
          axisLabel: {
            show: true,
            color: "#ffffff",
          },
          type: "value",
        },
        series: [
          {
            name: "已办",
            data: data1,
            type: "bar",
            label: {
              color: "#fff",
              show: true,
              position: "top", // 标签的位置，可以是'top'、'bottom'、'left'、'right'等
              formatter: "{c}", // {c} 表示系列中的数据值
            },
            itemStyle: {
              //渐变色
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgba(106, 124, 250, 1)" },
                  { offset: 1, color: "rgba(54, 69, 176, 0.55)" },
                ],
              },
            },
          },
          {
            name: "待办",
            data: data3,
            type: "bar",
            label: {
              color: "#fff",
              show: true,
              position: "top", // 标签的位置，可以是'top'、'bottom'、'left'、'right'等
              formatter: "{c}", // {c} 表示系列中的数据值
            },
            itemStyle: {
              //渐变色
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgba(7, 163, 209, 1)" },
                  { offset: 1, color: "rgba(1, 193, 243, 0.15)" },
                ],
              },
            },
          },
        ],
      };
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
    openCenteredWindow(
      url,
      windowName = "centeredWindow",
      width = 1200,
      height = 600
    ) {
      // 计算窗口的左上角位置
      const left = (window.screen.width - width) / 2;
      const top = (window.screen.height - height) / 2; // 设置窗口特性
      const windowFeatures = `
 width=${width},
 height=${height},
 left=${left},
top=${top},
resizable=yes,
scrollbars=yes,
status=no
`; // 打开新窗口
      const newWindow = window.open(url, windowName, windowFeatures); // 检查是否成功打开窗口
      if (!newWindow) {
        console.error("弹出窗口被浏览器阻止，请允许弹出窗口。");
        open();
      }
    },
    toShow(e) {
      this.show = true;
      this.titNum = e;
      let channel_id = 1;
      if (e == 1) {
        channel_id = 1;
      }
      if (e == 2) {
        (channel_id = 7), 8, 9, 10;
      }
      if (e == 3) {
        channel_id = 4;
      }
      article
        .query({ channel_id: channel_id, page: 1, size: 30 })
        .then((res) => {
          this.articleList = res.data.list;
        });
    },
    toShow2(n, m, z, y) {
      this.group = n;
      this.groupName = m;
      if (z) {
        this.leader = z;
        this.deputy_leader = y;
      } else {
        this.leader = "";
        this.deputy_leader = "";
      }
      this.show2 = true;
      this.getList();
    },
    toInfo(id) {
      article.detail({ article_id: id }).then((res) => {
        this.type = 1;
        this.info = res.data;
        if (res.data.url == "") {
          this.show = true;
        } else {
          this.openCenteredWindow(res.data.url);
        }
      });
    },
    toInfo2(id) {
      station.feedback.detail({ feedback_id: id }).then((res) => {
        this.type = 2;
        this.info = res.data;
        this.show = true;
      });
    },
    toActive(id, name, i) {
      this.map_id = id;
      this.name = name;
      this.gridList = this.regionList[i].gridList;
      // region.query({ parent_id: id }).then((res) => {
      //   this.gridList = res.data;
      // });
    },
  },
};
</script>
<style lang="less" scoped>
.item-tit {
  position: relative;
  // width: 334px;
  // height: 50px;
  // line-height: 40px;
  color: #e5ecff;
  font-size: 26px;
  padding: 5px 32px;
  margin-bottom: 20px;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
  }
  // div {
  //   margin-left: 30px;
  // }
}
.chart3 {
  width: 100%;
  height: 600px;
  margin-top: 50px;
}
.home {
  top: 30px;
  width: 80px;
}
.index {
  position: relative;
  z-index: 1;
  .titles {
    font-size: 44px;
    color: white;
    text-align: center;
    margin-top: 20px;
    position: relative;
    z-index: 2;
    height: 80px;
  }
  .main {
    margin: 50px 40px 0;
    .mian-left {
      width: 588px;
      .item1 {
        .item-main {
          .act-item {
            margin-bottom: 20px;
            .icon {
              width: 79.81px;
            }
            .act-info {
              font-size: 20px;
              color: white;
              margin-left: 8px;
              img {
                width: 161px;
                margin-top: 5px;
              }
              .num {
                font-size: 20px;
              }
            }
          }
        }
      }
    }
    .mian-center {
      width: 630px;
      position: relative;
      .item-main {
        padding: 0 !important;
      }
      .lianluo {
        width: 100%;
        height: 120px;
        color: #ffffff;
        font-size: 16px;
        text-align: center;
        position: relative;
        img {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .line {
          height: 100px;
          width: 3px;
          background: linear-gradient(to bottom, #0f4589, #3eb9dc, #0f4589);
        }
        .lianluo_tit {
          height: 120px;
          width: 150px;
          padding-top: 16px;
          div:nth-child(1) {
            color: #ffdd00;
            font-size: 46px;
          }
          div:nth-child(1) span {
            font-size: 12px;
            color: white;
          }
        }
        .seamless-warp2 {
          height: 80px;
          width: 600px;
          overflow: hidden;
        }
        .lianluo_item {
          height: 120px;
          width: 100px;
          div:nth-child(1) {
            color: #ffdd00;
            font-size: 26px;
            margin-bottom: 14px;
          }
          div:nth-child(1) span {
            font-size: 12px;
            color: white;
          }
        }
      }
      .total {
        position: absolute;
        left: 0px;
        z-index: 2;
        padding: 13px 16px;
        width: 149px;
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .total-tit {
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          margin-bottom: 13px;
        }
        .total-num {
          font-size: 14px;
          margin-bottom: 10px;
          color: #ffdd00;
        }
        .total-btn {
          width: 85px;
          color: white;
          background: linear-gradient(to bottom, #47cee6, #4fb8c1);
          font-size: 11px;
          margin: 13px auto;
          text-align: center;
          border-radius: 13px;
          padding: 3px 0;
        }
      }
      .center-map {
        width: 576px;
        position: relative;
        display: block;
        margin: 5% auto;
        .map {
          width: 100%;
        }
        .map-item {
          position: absolute;
          font-size: 16px;
          color: white;
          text-align: center;
          img {
            width: 37px;
          }
        }
        // .map-item_0{
        //     top: 0;
        //     left: 0;
        //   }
        //   .map-item_1{
        //     top: 20px;
        //   }
      }
    }
    .mian-right {
      width: 588px;
    }

    .item {
      position: relative;
      width: 100%;
      // height: 340px;
      margin-bottom: 20px;
      .bg2 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }

      .item-main {
        padding: 20px 30px;

        .total {
          margin-top: 10px;
          .total-item {
            width: 48%;
            margin-bottom: 19px;
            img {
              width: 80px;
              height: 80px;
              margin-right: 30px;
            }
            .nums {
              div:nth-child(1) {
                color: #f6d21e;
                font-weight: bold;
                font-size: 30px;
              }
              div:nth-child(2) {
                color: #c0c3da;
                font-weight: bold;
                font-size: 18px;
              }
            }
          }
        }
        .chart1 {
          height: 253px;
        }
        // #chart1{
        //   width: 1000px;
        // }
        .list1 {
          color: white;
          margin-top: 5px;
          .list-item {
            font-size: 18px;
            padding: 6px 0;
            img {
              width: 80px;
              height: 80px;
              object-fit: cover;
            }
            .item-info {
              width: 80%;
            }
            div {
              font-size: 16px;
            }
            // div:nth-child(1) {
            //   width: 80%;
            //   overflow: hidden;
            //   white-space: nowrap; //内容超出不换行
            //   text-overflow: ellipsis;
            // }
            .item-tit {
              overflow: hidden;
              white-space: nowrap; //内容超出不换行
              text-overflow: ellipsis;
            }
            .create_time {
              color: #ffdd00;
              margin-top: 5px;
              text-align: right;
              font-size: 12px;
              margin-top: 15px;
            }
          }
          .list-nav {
            background: #b97c11;
            font-size: 20px;
          }
          .seamless-warp {
            height: 250px;
            overflow: hidden;
          }
        }
        .list2 {
          // background: #A44D02;
          font-size: 14px;
          padding: 10px 0;
          .list-nav {
            // background: #a44d02;
            color: #fff;
          }
          .list-item {
            // background: #a44d02;
            margin-top: 5px;
            padding: 8px 15px;
          }
          .list-nav {
            background: #14797d;
            padding: 11px 0;
          }
          .list-flex {
            flex: 1;
            text-align: center;
          }
          .list-item2 {
            border: none;
            color: white;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
          }
          .scroll3 {
            height: 120px !important;
          }
          .list-item3 {
            color: white;
            padding: 0;
            border: none;
            .head {
              width: 31px;
              height: 32px;
              object-fit: cover;
              border-radius: 50%;
            }
          }
          .time {
            text-align: right;
            color: #ffdd00;
            font-size: 12px;
            margin-top: 5px;
          }
          .list2-info {
            color: #fff;
            .list2-info-tit {
              font-size: 16px;
              margin-bottom: 10px;
            }
            div {
              color: #fff;
            }
          }
          .list2-tab {
            background: #c91f1f;
            color: white;
            font-size: 18px;
            height: fit-content;
            padding: 2px 8px;
            border-radius: 8px;
            width: fit-content;
            margin-left: auto;
            margin-top: 10px;
          }
          .seamless-warp {
            height: 180px;
            overflow: hidden;
          }
        }
        .chart2 {
          height: 230px;
        }
      }
    }
    .item1 {
      height: 222px;
    }
    .item2 {
      height: 253px;
    }
    .item3 {
      height: 230px;
    }
    .item4 {
      height: 204px;
    }
    .item5 {
      height: 253px;
    }
    .item6 {
      height: 240px;
      color: white;
      .seamless-warp {
        height: 140px !important;
        .list-item6 {
          border: none;
          padding: 8px 0 !important;
          border-bottom: solid 1px #4460da;
          color: #a7c6ff;
        }
      }
    }
  }
  .show {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.452);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
  }

  .show-con {
    width: 1400px;
    height: 804px;
    position: absolute;
    color: white;
    left: 50%;
    margin-left: -700px;
    top: 50px;
    z-index: 5;
    background: #021959;
    .bg4 {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      left: 0;
      z-index: -1;
    }
    .show-main {
      margin: 30px 70px;
      .show-main-con {
        max-height: 686px;
        overflow-x: auto;
        .con-tit {
          text-align: center;
          font-size: 30px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .con-tit2 {
          text-align: left;
        }
        .con-time {
          color: rgb(187, 184, 184);
          font-size: 20px;
          text-align: right;
          margin-bottom: 10px;
        }
        .con-time2 {
          text-align: left;
        }
        .con-content2 {
          border-bottom: dotted 1px gainsboro;
          padding-bottom: 20px;
          margin-bottom: 20px;
        }
      }
      #iframe {
        height: 686px;
        background: white;
      }
      .con-return {
        font-size: 27px;
        margin-bottom: 10px;
        text-align: right;
      }
      .title-tit {
        font-size: 30px;
        font-weight: bold;
        border-left: solid 4px #2bc0ef;
        padding-left: 10px;
      }
      .list-time {
        margin-top: 30px;
        font-size: 18px;
      }
      .show-list {
        background: #d63a00;
        margin-top: 16px;
        padding: 15px 15px;
        border-radius: 8px;

        .list-tit {
          // width: 350px;
          font-size: 26px;
        }
        img {
          width: 288px;
          height: 130px;
          object-fit: cover;
        }
      }
    }
  }
  .show-con2 {
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    padding: 20px;
    min-height: 600px;
    height: auto;
    .show-main2 {
      max-height: 800px;
      overflow-x: auto;
    }
    .show2-tit {
      text-align: center;
      font-size: 28px;
      padding: 0px 0 20px;
    }
    .show2-tit2 {
      border-left: solid 8px rgb(241, 49, 49);
      padding-left: 10px;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .show-Lea {
      color: rgb(241, 159, 81);
      text-align: center;
      padding-bottom: 10px;
      span {
        margin-left: 30px;
      }
    }
    .lists {
      margin-bottom: 20px;
    }
    .list-con {
      flex-wrap: wrap;
      .show-list {
        background: rgba(255, 255, 255, 0.2);
        text-align: center;
        padding: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          object-fit: cover;
        }
        .tab {
          font-size: 14px;
          color: #f1a92d;
        }
      }
    }
  }
}
.show {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.452);
  display: flex;
  justify-content: center;
  align-items: center;
}
.show-con {
  width: 1400px;
  height: 804px;
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -700px;
  top: 150px;
  z-index: 3;
  .bg4 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
  }
  .show-main {
    margin: 30px 70px;
    .show-main-con {
      max-height: 686px;
      overflow-x: auto;
      .con-tit {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
    #iframe {
      height: 686px;
      background: white;
    }
    .con-return {
      font-size: 27px;
      margin-bottom: 10px;
      text-align: right;
    }
    .title-tit {
      font-size: 30px;
      font-weight: bold;
      border-left: solid 4px #2bc0ef;
      padding-left: 10px;
    }
    .list-time {
      margin-top: 30px;
      font-size: 18px;
    }
    .show-list {
      background: #d63a00;
      margin-top: 16px;
      padding: 15px 15px;
      border-radius: 8px;
      .list-tit {
        // width: 350px;
        font-size: 26px;
      }
      img {
        width: 288px;
        height: 130px;
        object-fit: cover;
      }
    }
  }
}
.show4 {
  width: 80%;
  // height: 791.5px;
  position: absolute;
  left: 10%;
  bottom: 114px;
  z-index: 6;

  .show-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .show4-con {
    padding: 90px 81px 20px;
    .item-tit {
      width: 441px;
    }
    .show4-intro {
      color: #ffdd00;
      font-size: 18px;
      margin-bottom: 30px;
      div {
        margin-bottom: 14px;
      }
    }
    .show4-list {
      border: solid 1px #11efff;
      padding: 7px 24px;
      font-size: 16px;
      font-weight: bold;
      margin-right: 20px;
      margin-bottom: 20px;
      color: white;
      background: linear-gradient(
        to right,
        rgba(5, 45, 89, 0.04),
        rgba(35, 123, 222, 0.27),
        rgba(64, 133, 210, 0.11)
      );
      img {
        width: 75.8px;
        height: 78.63px;
        margin: 0 auto;
        display: block;
      }
      div {
        margin-bottom: 8px;
      }
      span {
        color: #00f6ff;
        margin-right: 14px;
      }
      .show4-list-tit {
        color: #00f6ff;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
      }
      .item-main {
        overflow: hidden;
        width: 240px;
        height: 180px;
        font-size: 12px;
        .time {
          text-align: right;
          color: #ffdd00;
          font-size: 8px;
        }
      }
    }
    .scroll3 {
      overflow: hidden;
    }
  }
}
.index .show5 {
  background: rgba(0, 0, 0, 0.7);
  .show5-con {
    width: 100%;
    // height: 100%;
    padding: 0 61px;

    .head-img {
      width: 704px;
      height: 940px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .head_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      .head_a {
        position: relative;
        width: 660px;
        height: 882px;
        display: block;
      }
    }
    .show5-con {
      font-size: 40px;
      width: 994px;

      .con1 {
        color: #ffdd00;
        // margin-bottom: 200px;
        font-weight: bold;
        line-height: 1.5;
      }
      .con2 {
        color: #ffffff;
        font-size: 38px;
        position: absolute;
        bottom: 30px;
        right: 0;
      }
    }
  }
}
</style>